<template>
  <div>
    <div class="base-wapper">
      <h3 class="titleInfo" @click="switchInfo('v-base')">
      <span :class="[baseInfo? 'el-icon-minus':'el-icon-plus']"></span>
      {{$t('webchat.basicInfo')}}
    </h3>
    <v-base
    v-show="baseInfo"
    :webchatData="webchatData"
    :chatInfo="chatInfo"
    :queueName="queueName"
    :channelSourceName="channelSourceName"
    :remark="remark">
    </v-base>
    </div>

    <div class="track-wapper" v-show="webchatData.platform === 'pc' || webchatData.platform === 'wap'">
      <h3 class="titleInfo" @click="switchInfo('v-track')">
        <span :class="[trackInfo && isComponent==='v-track' ? 'el-icon-minus':'el-icon-plus']"></span>
        {{$t('webchat.trackBrowseCount', { count: ubaInfoList.count ? ubaInfoList.count : 0 })}}
      </h3>
      <v-track
      v-show="trackInfo && isComponent==='v-track'"
      :userBehaviorVideoId="userBehaviorVideoId"
      :initUbaInfoList="ubaInfoList"
      @getVideos="getVideos"
      :tabType="tabType"
      :id="webchatData._id"
      :ubaSessionId="ubaSessionId">
      </v-track>
    </div>
    <div class="track-wapper" v-show="webchatData.platform === 'pc' || webchatData.platform === 'wap' || webchatData.platform === 'sdk'">
      <h3 class="titleInfo" @click="switchInfo('v-custom')">
        <span :class="[customInfo && isComponent==='v-custom' ? 'el-icon-minus':'el-icon-plus']"></span>
        {{$t('webchat.chatCustomFields')}}
      </h3>
      <v-custom
      v-show="customInfo && isComponent==='v-custom'"
      :webchatData="webchatData"
      >
      </v-custom>
    </div>

    <div class="visit-wapper">
      <h3 class="titleInfo"  @click="switchInfo('v-visit')">
        <span :class="[visitInfo && isComponent==='v-visit' ? 'el-icon-minus':'el-icon-plus']"></span>
        {{$t('webchat.accessInformation')}}：({{visitInfoList.length}}{{$t('webchat.communication')}})
      </h3>
      <v-visit
      v-show="visitInfo && isComponent==='v-visit'"
      :visitInfoList="visitInfoList">
      </v-visit>
    </div>
  </div>
</template>

<script>
import BaseInfo from './BaseInfo'
import TrackInfo from './TrackInfo'
import VisitInfo from './VisitInfo'
import CustomInfo from './CustomInfo'
export default {
  name: 'AuxiliaryInfo',
  data: function () {
    return {
      isComponent: 'v-base',
      baseInfo: true,
      trackInfo: false,
      visitInfo: false,
      customInfo: false
    }
  },
  props: {
    chatInfo: Object,
    tabType: String,
    visitInfoList: Array,
    remark: String,
    ubaInfoList: Object,
    userBehaviorVideoId: String,
    webchatData: Object,
    ubaSessionId: String,
    queueName: String,
    channelSourceName: String
  },
  components: {
    'v-base': BaseInfo,
    'v-track': TrackInfo,
    'v-visit': VisitInfo,
    'v-custom': CustomInfo
  },
  methods: {
    switchInfo (component) {
      this.isComponent = component
      switch (component) {
        case 'v-base':
          this.baseInfo = !this.baseInfo
          break
        case 'v-track':
          this.trackInfo = !this.trackInfo
          this.visitInfo = false
          this.customInfo = false
          break
        case 'v-visit':
          this.visitInfo = !this.visitInfo
          this.trackInfo = false
          this.customInfo = false
          break
        case 'v-custom':
          this.customInfo = !this.customInfo
          this.trackInfo = false
          this.visitInfo = false
          break
      }
    },
    getVideos (state) {
      this.$emit('getVideos', state)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .chat_info .titleInfo
    cursor pointer
    font-weight bold
    color $cf-gray2
    margin-top 6px
  .el-icon-minus
  .el-icon-plus
    color $cf-level3
</style>
